<!-- 游戏 首页 -->
<template>
	<view class="game">
		<template v-if="gaming.step == 0">
			<view class="hd">
				<uv-text :text="cont.name" color="#fff" size="30px" align="center" margin="10px 0 60px"></uv-text>
				<uv-text text="选择游戏" color="#fff" size="32px" align="center" margin="10px 0"></uv-text>
			</view>
			<view class="bd uv-flex-row">
				<view class="item" @click="select(1)"></view>
				<view class="item" @click="select(2)"></view>
			</view>
		</template>
		<template v-if="gaming.step == 3">
			<view class="game-desc uv-flex-column">
				<template v-if="gaming.result.type == 'fail'">
					<view class="title">游戏失败</view>
				</template>
				<template v-if="gaming.result.type == 'success'">
					<view class="title">恭喜你，闯关成功~</view>
					<view class="desc">本次战绩：--</view>
				</template>
				<view class="btns">
					<uv-button text="再玩一次" @click="again"></uv-button>
					<uv-button text="继续学习"></uv-button>
				</view>
			</view>
		</template>
		<template v-if="gaming.step == 1">
			<view class="game-desc uv-flex-column">
				<view class="title">按空格键开始</view>
			</view>
		</template>
		<view class="health" :style="{opacity: gaming.step == 2 ? 1:0}">
			<uv-line-progress :percentage="gaming.health" :showText="false" active-color="#ff0000"></uv-line-progress>
		</view>
		<canvas class="game-canvas" canvas-id="canvas" />
	</view>
</template>
<script setup>
	import { ref } from 'vue';
	import useGame from '../hooks/useGame.js';
	const props = defineProps({
		cont: {
			type: Object,
			default () {
				return {}
			}
		}
	})
	const { gaming, selectGame, clearGame } = useGame(props.cont);
	const gameType = ref(0);

	function select(type) {
		gameType.type = type;
		gaming.keys = props.cont.courseText[0];
		selectGame();
	}

	function again() {
		gaming.step = 0;
		clearGame();
	}
</script>
<style>
	.health>>>.uv-line-progress {
		border-radius: 2px;
	}
	.health>>>.uv-line-progress__background {
		border-radius: 2px;
	}
	.health>>>.uv-line-progress__line {
		border-radius: 0;
	}
</style>
<style scoped lang="scss">
	.game-canvas {
		position: fixed;
	}
	.game {
		width: 100%;
		height: 100%;
		&-canvas {
			width: 100%;
			height: 100%;
		}
		&-desc {
			align-items: center;
			position: fixed;
			z-index: 9;
			left: 50%;
			top: 200px;
			transform: translateX(-50%);
			.title {
				font-size: 50px;
				color: #fff;
			}
		}
		.health {
			position: fixed;
			z-index: 9;
			left: 30px;
			top: 30px;
			width: 200px;
		}
	}
	.bd {
		align-items: center;
		justify-content: center;
	}
	.item {
		width: 200px;
		height: 254px;
		margin: 20px 50px;
		background-size: contain !important;
		cursor: pointer;
		border-radius: 20px;
		overflow: hidden;
		&:first-child {
			background: url('https://www.type.fun/assets/img-game1.49f23f12.png') no-repeat center center;
		}
		&:last-child {
			background: url('https://www.type.fun/assets/img-game2.9ee7c9c4.png') no-repeat center center;
		}
	}
</style>